<template>
    <ul class="header">
            <li class="gory1">
                <span class="iconfont gory" @click="back">&#xe6b8;</span>
            </li>
             <li class="sou">
                 <div class="soso">
                <span class="text1">小白商城</span>
                <span class="iconfont"></span>
                <router-link tag="span" to="/" class="text2">你的开心，是我们最大的努力</router-link>
                </div>

            </li>
             <li class="me">
                <span class="iconfont gory" @click="backs">&#xe625;</span>
            </li>
    </ul>
</template>

<script>
export default {
  methods: {
    back () {
      this.$router.push('/Category')
    },
    backs () {
      this.$router.push('/Me')
    }
  }
}
</script>

<style lang="less" scoped>
.header{
    height: 1rem;
    width: 100%;
    background: #9b95c9;
    display: flex;
    .gory1{
        width: 10%;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
            .gory{
                font-size: 20px;
                color: white;
            }
        }
    .sou{
        width: 80%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .soso{
            height: 0.65rem;
            background:#afb4db;
            width: 6rem;
            border-radius: 0.3rem;
            .text1{
                font-size: 0.4rem;
                line-height: 0.65rem;
                color:#6950a1;
                margin-left: 0.2rem;
                font-weight:bold
            }
            .text2{
                margin-left: 0.7rem;
                line-height: 0.65rem;
                color: #666;
            }
        }
    }
    .me{
        width: 10%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
         .gory{
                font-size: 20px;
                color: white;
            }
    }
}
</style>
